import { Col, DatePicker, Form, Input, Row, Select } from "antd";

const ActionForm = () => {
  return (
    <Form layout="vertical" hideRequiredMark>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="name"
            label="字段1"
            rules={[{ required: true, message: '请输入字段1' }]}
          >
            <Input placeholder="请输入字段1" />
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="url"
            label="字段2"
            rules={[{ required: true, message: 'Please enter url' }]}
          >
            <Input
              style={{ width: '100%' }}
              addonBefore="http://"
              addonAfter=".com"
              placeholder="请输入字段2"
            />
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="owner"
            label="字段3"
            rules={[{ required: true, message: 'Please select an owner' }]}
          >
            <Select placeholder="请选择字段3">
              <Select.Option value="xiao">Xiaoxiao Fu</Select.Option>
              <Select.Option value="mao">Maomao Zhou</Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="type"
            label="字段4"
            rules={[{ required: true, message: 'Please choose the type' }]}
          >
            <Select placeholder="请选择字段4">
              <Select.Option value="private">Private</Select.Option>
              <Select.Option value="public">Public</Select.Option>
            </Select>
          </Form.Item>
        </Col>
      </Row>
      <Row gutter={16}>
        <Col span={12}>
          <Form.Item
            name="approver"
            label="字段5"
            rules={[{ required: true, message: 'Please choose the approver' }]}
          >
            <Select placeholder="请选择字段5">
              <Select.Option value="jack">Jack Ma</Select.Option>
              <Select.Option value="tom">Tom Liu</Select.Option>
            </Select>
          </Form.Item>
        </Col>
        <Col span={12}>
          <Form.Item
            name="dateTime"
            label="字段6"
            rules={[{ required: true, message: 'Please choose the dateTime' }]}
          >
            <DatePicker.RangePicker
              style={{ width: '100%' }}
            />
          </Form.Item>
        </Col>
      </Row>
    </Form>
  )
}

export default ActionForm;
